<script setup name="formFileReport">
import { reactive } from "vue";
import { ElMessage } from "element-plus";

import config from "@/api/config.js";
import util from "@/utils/util";

// pinia
import { storeToRefs } from "pinia";
import { useUserStore } from "@/stores";
const { user, token } = storeToRefs(useUserStore());

// 参数接收
// const props = defineProps({
// 	info: {
// 		type: Object,
// 		default: () => {
// 			return {};
// 		},
// 	},
// })

// Vue3.4 版本之后，我们将使用 defineModel 替代子组件中的 props 和 emit。
// 组件中可以支持定义多个 defineModel，可以满足绑定多个双向绑定的属性
const modelValue = defineModel();

// 上传失败
function handleError(e) {
  console.log("handleError", e);
}

// 上传成功
function handleSuccess(response, file, fileList) {
  // console.log('success response', response);
  console.log("success file", file);

  file = {
    url: response.fileName,
  };
  // console.log('success fileList', fileList);
}

// 文件类型限制JPG/JPEG/PNG/PDF/WORD
const fileType = reactive(["doc", "docx", "pdf", "png", "jpg", "jpeg"]);
// 准备上传
function beforeUpload(file) {
  // 校检文件类型
  const fileName = file.name.split(".");
  const fileExt = fileName[fileName.length - 1];
  const isTypeOk = fileType.indexOf(fileExt) >= 0;
  if (!isTypeOk) {
    ElMessage.error(`文件格式不正确, 请上传${fileType.join("/")}格式文件!`);
    return false;
  }

  const isLt10M = file.size / 1024 / 1024 < 10;
  if (!isLt10M) {
    ElMessage.error("上传附件大小不能超过 10MB!");
  }

  return isLt10M;
}

// 展示额图片
function getPreviewImage(url) {
  // console.log(url);
  const arr = url.split(".");
  // console.log(arr[arr.length-1]);
  const hou = arr[arr.length - 1];
  console.log(hou);

  if (["doc", "docx"].includes(hou)) {
    return util.getImageUrl("WORD.png");
  }

  if (["pdf", "pdfx"].includes(hou)) {
    return util.getImageUrl("PDF.png");
  }

  return url;
}

// 刪除
function changeDele(file) {
  // console.log(file.uid);
  // console.log(modelValue.value);

  const index = modelValue.value.find((item) => item.uid == file.uid);
  modelValue.value.splice(index, 1);
}

// 回调
const emit = defineEmits(["change", ""]);
</script>

<template>
  <!-- auto-upload 是否请求接口 -->
  <el-upload
    list-type="picture"
    v-model:file-list="modelValue"
    class="upload-demo"
    :action="`${config.host}/common/upload`"
    :headers="{
      Authorization: `Bearer ${token}`,
    }"
    :before-upload="beforeUpload"
    :on-error="handleError"
    :on-success="handleSuccess"
    :auto-upload="true"
    style="width: 100%"
  >
    <el-button type="primary" plain size="large">
      <el-icon style="margin-right: 5px">
        <Upload />
      </el-icon>
      上传附件
    </el-button>

    <template #tip>
      <div class="el-upload__tip">
        <!-- 文档最大限制10M,上传格式支持JPG/JPEG/PNG/PDF/WORD建议先下载申请承诺书模板,完成并上传后再填写网页信息 -->
      </div>
    </template>

    <template #file="{ file }">
      <div class="preview" v-if="file" style="width: 100%">
        <el-image
          :src="getPreviewImage(file.response?.url || file.name)"
          fit="cover"
          class="preview-image"
        />
        <p>{{ file.response?.newFileName || file.name }}</p>
        <el-icon @click="changeDele(file)">
          <CloseBold />
        </el-icon>
      </div>
    </template>
  </el-upload>
</template>

<style lang="scss" scoped>
.el-upload__tip {
  font-weight: 400;
  font-size: 14px;
  color: #999999;
}

.preview {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
  // width: 50%;

  .preview-image {
    width: 70px;
    height: 70px;
    border-radius: 10px;
  }

  p {
    margin-left: 15px;
  }

  .el-icon {
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 10px;
  }
}
</style>
